<template>
  <div class="cart-list">
    <div class="cart-list-search">
      <div class="cart-list-start">
        <el-form label-position="top" label-width="100%" :model="search">
          <el-form-item label="输入商品标题搜索">
            <div class="start-text"></div>
            <el-input style="width: 25%" v-model="search.title"></el-input>
            <el-button class="btn" type="primary" @click="inSearch()"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="cart-list-header">
      <div class="text">商品分类筛选</div>
      <el-radio-group v-model="radio1" size="mini" @change="requestData">
        <el-radio
          v-for="(item, index) in sortData"
          :key="index"
          :label="item"
          border
        ></el-radio>
        <!-- <el-radio label="新鲜水果" border></el-radio>
        <el-radio label="乳品饮料" border></el-radio>
        <el-radio label="速食冻品" border></el-radio>
        <el-radio label="粮油调味" border></el-radio>
        <el-radio label="肉蛋水产" border></el-radio>
        <el-radio label="休闲零食" border></el-radio>
        <el-radio label="居家百货" border></el-radio> -->
      </el-radio-group>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
      @btn1="cartDelete"
      @btn2="cartEdit"
    ></table-list>
    <!-- 弹出框表单 -->
    <div class="pay-from">
      <el-dialog
        title="上报水电费用"
        :visible.sync="dialogFormVisible"
        width="50%"
      >
        <div class="write-from">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品介绍标题" prop="title">
              <el-input
                class="input-write"
                v-model="ruleForm.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input
                class="input-write"
                v-model="ruleForm.price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="sort">
              <el-radio-group v-model="ruleForm.sort">
                <el-radio label="时令蔬菜"></el-radio>
                <el-radio label="新鲜水果"></el-radio>
                <el-radio label="乳品饮料"></el-radio>
                <el-radio label="速食冻品"></el-radio>
                <el-radio label="粮油调味"></el-radio>
                <el-radio label="肉蛋水产"></el-radio>
                <el-radio label="休闲零食"></el-radio>
                <el-radio label="居家百货"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="info-item" label="商品产地" prop="place">
              <el-input
                class="input-write"
                v-model="ruleForm.place"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item class="info-item" label="商品规格" prop="guige">
              <el-input
                class="input-write"
                v-model="ruleForm.guige"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="detail-info">
              <div class="info-item" id="shelf-life">
                <el-form-item class="info-item" label="保质期" prop="shelfLife">
                  <el-input
                    class="input-write"
                    v-model.number="ruleForm.shelfLife"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                  <el-select
                    v-model="ruleForm.unit"
                    placeholder="请选择保质期单位"
                  >
                    <el-option label="月" value="月"></el-option>
                    <el-option label="日" value="日"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <el-form-item class="info-item" label="储存方式" prop="howSave">
              <el-input
                class="input-write"
                v-model="ruleForm.howSave"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="cancelBtn()">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableList from "../../components/common/TableList.vue";
export default {
  data() {
    let patter = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
    let isNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      } else if (!patter.test(value)) {
        return callback(new Error("必须非负整数或至多保留两位小数"));
      } else {
        callback();
      }
    };
    return {
      radio1: "时令蔬菜",
      sortData: [
        "时令蔬菜",
        "新鲜水果",
        "乳品饮料",
        "速食冻品",
        "粮油调味",
        "肉蛋水产",
        "休闲零食",
        "居家百货",
      ],
      search: {
        title: "",
      },
      tableHeader: [
        { prop: "title", label: "商品标题" },
        { prop: "price", label: "商品价格" },
        { prop: "guige", label: "商品规格" },
        { prop: "shelf_life", label: "保质期" },
        { prop: "how_save", label: "储存方式" },
        { prop: "shelf_life", label: "保质期" },
        { prop: "time", label: "发布时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 1,
        edit: 1,
      },
      btn1: "删除",
      btn2: "编辑",
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        price: "",
        sort: "",
        place: "",
        guige: "",
        shelfLife: 0,
        unit: "",
        howSave: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入商品标题", trigger: "blur" },
          { min: 5, max: 20, message: "长度在 5到 20 个字符", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { validator: isNumber, trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        place: [{ required: true, message: "请选择产地", trigger: "blur" }],
        guige: [{ required: true, message: "请选择规格", trigger: "blur" }],
        shelfLife: [
          { required: true, message: "请选择保质期", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        howSave: [
          { required: true, message: "请选择储存方式", trigger: "blur" },
        ],
      },
      sId: "",
    };
  },
  components: {
    TableList,
  },
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/b-cart-list",
        }).then((res) => {
          this.tableData = res.data.data.sort((a, b) => {
            return a.id < b.id ? 1 : -1;
          });
          if (this.radio1 == this.sortData[0]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[0]
            );
          }
          if (this.radio1 == this.sortData[1]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[1]
            );
          }
          if (this.radio1 == this.sortData[2]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[2]
            );
          }
          if (this.radio1 == this.sortData[3]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[3]
            );
          }
          if (this.radio1 == this.sortData[4]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[4]
            );
          }
          if (this.radio1 == this.sortData[5]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[5]
            );
          }
          if (this.radio1 == this.sortData[6]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[6]
            );
          }
          if (this.radio1 == this.sortData[7]) {
            this.tableData = this.tableData.filter(
              (s) => s.sort == this.sortData[7]
            );
          }
          // this.tableData = this.tableData.filter((s) => {
          //   return s.state == "申请";
          // });
          resove();
        });
      });
    },
    cartDelete(raw) {
      console.log(raw);
      this.$confirm("将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            url: "delete_cart_item",
            method: "POST",
            data: {
              s_id: raw.s_id,
            },
          }).then(() => {
            this.requestData().then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      // request({
      //   url: "delete_cart_item",
      //   method: "POST",
      //   data: {
      //     s_id: raw.s_id,
      //   },
      // }).then((res) => {
      //   if (res.data.mesg == "ok") {
      //     this.requestData().then(() => {
      //       this.$message.success("删除成功！");
      //     });
      //   }
      // });
    },
    cartEdit(raw) {
      console.log(raw);
      //给弹出框默认值
      this.ruleForm.title = raw.title;
      this.ruleForm.price = raw.price;
      this.ruleForm.sort = raw.sort;
      this.ruleForm.place = raw.place;
      this.ruleForm.guige = raw.guige;
      this.ruleForm.howSave = raw.how_save;
      console.log(raw.shelf_life.includes("天"));
      if (raw.shelf_life.includes("天")) {
        this.ruleForm.shelfLife = raw.shelf_life.slice(
          0,
          raw.shelf_life.length - 1
        );
        this.ruleForm.unit = "日";
      } else {
        this.ruleForm.shelfLife = raw.shelf_life.slice(
          0,
          raw.shelf_life.length - 2
        );
        this.ruleForm.unit = "月";
      }
      // this.ruleForm.shelfLife = "";
      this.sId = raw.s_id;
      this.dialogFormVisible = true;
    },

    //提交表单
    submitForm(formName) {
      //数据检验
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.unit == "月") {
            this.ruleForm.shelfLife = this.ruleForm.shelfLife + "个月";
          } else {
            this.ruleForm.shelfLife = this.ruleForm.shelfLife + "天";
          }
          // this.loading = true;
          request({
            method: "post",
            url: "/up_cart_item",
            data: {
              s_id: this.sId,
              title: this.ruleForm.title,
              price: this.returnFloat(this.ruleForm.price),
              sort: this.ruleForm.sort,
              place: this.ruleForm.place,
              guige: this.ruleForm.guige,
              shelfLife: this.ruleForm.shelfLife,
              howSave: this.ruleForm.howSave,
            },
          }).then((res) => {
            this.requestData().then((res) => {
              this.dialogFormVisible = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancelBtn() {
      this.dialogFormVisible = false;
    },
    inSearch() {
      // console.log(this.search.title);
      this.requestData().then(() => {
        if (this.search.title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.title.includes(this.search.title);
          });
          this.tableData = newShowData;
          // console.log(newShowData);
        }
      });
    },
    returnFloat(value) {
      // let value =Math.floor(value)
      let s = value.toString().split(".");
      console.log(s);
      if (s.length == 1) {
        value = value.toString() + ".00";
        return value;
      }
      if (s.length > 1) {
        if (s[1].length < 2) {
          value = value.toString() + "0";
        }
        return value;
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.cart-list {
  .cart-list-search {
    box-sizing: border-box;
    // margin: 20px;
    width: 100%;
    // height: 100%;
    padding: 20px;
    .cart-list-start {
      width: 100%;
      // height: 120px;
      background-color: #ffffff;
      color: #000;
      margin-bottom: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      .btn {
        margin-left: 10px;
      }
      // @include center;
    }

    .cart-list-table {
      // height: 100%;
      background-color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
      // overflow: scroll;
      // overflow-y: scroll;
      .pagination {
        padding-top: 10px;
        padding-bottom: 100px;
        display: flex;
        @include right;
        background-color: #ffffff;
      }
    }
  }
  .cart-list-header {
    // height: 50px;
    // border: 1px solid #ccc;
    background-color: #fff;
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 20px 20px;
    box-sizing: border-box;
    .text {
      font-size: 14px;
      color: #606266;
      padding-bottom: 20px;
    }
    .el-radio {
      background-color: #fff;
      margin-right: 0;
    }
  }
  .pay-form {
  }
  .write-from {
    // width: 100%;
    // height: 100vh;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    .input-write {
      width: 50%;
    }
    .detail-info {
      display: flex;
      .info-item {
        // padding-left: 35px;
      }
      .input-write {
        width: 150px;
      }
      #shelf-life {
        display: flex;
      }
    }
  }
}
</style>
